<script lang="jsx" setup>
import { nextTick, ref } from 'vue';
import { PlusOutlined } from '@ant-design/icons-vue';
import { UUID } from 'uuidjs';
import { addInteriorEcn, getWIPInventory } from '@/service/api/modules/engineering-manage/interior-ecn';
import useResetTableRef from '@/hooks/common/resetTableRef';
import { deepClone } from '@/utils';
import Add from './modules/add.vue';

const useModal = window.$useModal;

const commonSearchRef = ref(null);
const [searchParams, retSearchParams] = useResetTableRef({
  moduleNo: null
});
const formList = [
  {
    type: 'input',
    key: 'moduleNo',
    label: '生产型号',
    span: 16,
    placeholder: '请输入生产型号',
    showTime: true
  }
];

const leftTableRef = ref(null);

const leftColumn = [
  {
    key: 'dataIndex',
    dataIndex: 'dataIndex',
    title: '序号',
    width: 50,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  // {
  //   key: 'pdctbs',
  //   dataIndex: 'pdctbs',
  //   title: '标识',
  //   align: 'center',
  //   checked: true,
  //   ellipsis: true,
  //   width: 60
  // },
  {
    key: 'moduleNo',
    dataIndex: 'moduleNo',
    title: '生产型号',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 160,
    customRender: ({ record }) => {
      return <span class="fonw-800 color-#646cff">{record.moduleNo}</span>;
    }
  },
  {
    key: 'custProdNo',
    dataIndex: 'custProdNo',
    title: '客户型号',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 130
  },
  {
    key: 'pnType',
    dataIndex: 'pnType',
    title: '类型',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 80
  },
  {
    key: 'custAB',
    dataIndex: 'custAB',
    title: '客户名称',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 100
  }
];
const currentRow = ref(null);

const leftBottomDataSource = ref([]);
const loading = ref(false);

function search() {
  leftTableRef.value.getData();
}

function reset() {
  retSearchParams();
  search();
}

const rightTopTableRef = ref(null);
const rightTopSearchParams = ref({
  moduleNo: null
});

function getWipData() {
  getWIPInventory({ prodId: currentRow.value.prodId })
    .then(({ data, error }) => {
      if (!error) {
        data.pubtechnology.forEach((item, index) => {
          item.dataIndex = index + 1;
          item.tableUuid = UUID.genV4().hexNoDelim;
        });
        leftBottomDataSource.value = data.pubtechnology;
      } else {
        leftBottomDataSource.value = [];
      }
    })
    .finally(() => {
      loading.value = false;
    });
}

function handleLeftTableRowClick(row) {
  currentRow.value = row;
  rightTopSearchParams.value.moduleNo = row.moduleNo;
  nextTick(() => {
    rightTopTableRef.value.getData();
    getWipData();
  });
}

function handleLeftTableLoadSuccess(data) {
  if (!data.length) return;
  leftTableRef.value.setCurrentRowId(data[0]);
  handleLeftTableRowClick(data[0]);
}

const rightTopColumn = [
  {
    key: 'dataIndex',
    dataIndex: 'dataIndex',
    title: '序号',
    width: 70,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'oldModuleNo',
    dataIndex: 'oldModuleNo',
    title: '生产型号',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 160,
    customRender: ({ record }) => {
      return <span class="fonw-800 color-red">{record.oldModuleNo}</span>;
    }
  },
  {
    key: 'newModuleNo',
    dataIndex: 'newModuleNo',
    title: '新生产型号',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 160,
    customRender: ({ record }) => {
      return <span class="fonw-800 color-#646cff">{record.newModuleNo}</span>;
    }
  },
  {
    key: 'newCustProdNo',
    dataIndex: 'newCustProdNo',
    title: '新客户型号',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 160
  },
  {
    key: 'newSameModuleNo',
    dataIndex: 'newSameModuleNo',
    title: '新同等型号',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 160
  },
  {
    key: 'newSurfTrea1',
    dataIndex: 'newSurfTrea1',
    title: '新型号特性',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 140
  },
  // {
  //   key: 'remark',
  //   dataIndex: 'remark',
  //   title: '备注',
  //   align: 'center',
  //   checked: true,
  //   ellipsis: true
  // },
  {
    key: 'effectiveTiming',
    dataIndex: 'effectiveTiming',
    title: '生效时间',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 140
  },
  {
    key: 'customerCheck',
    dataIndex: 'customerCheck',
    title: '客户确认',
    align: 'center',
    checked: true,
    ellipsis: true,
    customRender: ({ record }) => {
      return record.customerCheck === '1' ? '已确认' : '';
    },
    width: 120
  },
  {
    key: 'oldDataDeal',
    dataIndex: 'oldDataDeal',
    title: '旧资料处理方法',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 160
  },
  {
    key: 'nowboardDealMethod',
    dataIndex: 'nowboardDealMethod',
    title: '在线板处理方法',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 160
  },
  {
    key: 'inventoryDealMethod',
    dataIndex: 'inventoryDealMethod',
    title: '库存板处理方法',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 160
  },
  {
    key: 'changeReason',
    dataIndex: 'changeReason',
    title: '变更原因',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 160
  },
  {
    key: 'otherReason',
    dataIndex: 'otherReason',
    title: '其他原因',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 160
  },
  {
    key: 'createBy',
    dataIndex: 'createBy',
    title: '创建人',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 140
  },
  {
    key: 'createDate',
    dataIndex: 'createDate',
    title: '创建时间',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 160
  }
];

const addRef = ref(null);
const { handleClose, handleLoading, handleShow } = useModal({
  modalOption: {
    title: '新增',
    destroyOnClose: true,
    width: '800px',
    height: '600px',
    centered: true
  },
  component: () => <Add ref={addRef} row-data={currentRow.value} />,
  onOk: async () => {
    const data = { ...addRef.value };
    const formData = deepClone(data.model);
    formData.changeReason = formData?.changeReason?.join(',') || null;
    formData.customerCheck = formData.customerCheck ? '1' : '0';
    formData.pnType = formData.pnType ? '量产' : null;
    await data.validateForm();
    handleLoading(true);
    addInteriorEcn({ ...formData })
      .then(({ error }) => {
        if (!error) {
          window.$message.success('操作成功');
          handleClose();
          search();
        }
      })
      .finally(() => {
        handleLoading(false);
      });
  }
});

function handleAdd() {
  if (!currentRow.value) {
    window.$message.error('请先选择生产型号!');
    return;
  }
  handleShow();
}

const rightBottomTableRef = ref(null);
const rightBottomSearchParams = ref({});

const rightBottomColumn = [
  {
    key: 'dataIndex',
    dataIndex: 'dataIndex',
    title: '序号',
    width: 70,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  // {
  //   key: 'deptCaption',
  //   dataIndex: 'deptCaption',
  //   title: '工序名称',
  //   width: 120,
  //   align: 'center',
  //   checked: true,
  //   ellipsis: true
  // },
  {
    key: 'techName',
    dataIndex: 'techName',
    title: '工艺名称',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 120
  },
  {
    key: 'repeatCount',
    dataIndex: 'repeatCount',
    title: '工步',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 120
  },
  {
    key: 'wipPnlQty',
    dataIndex: 'wipPnlQty',
    title: 'PNL结存',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 120
  },
  {
    key: 'wipSetQty',
    dataIndex: 'wipSetQty',
    title: 'SET结存',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 120
  },
  {
    key: 'wipscrapSet',
    dataIndex: 'wipscrapSet',
    title: '含废SET',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 120
  },
  {
    key: 'wipscrapPcs',
    dataIndex: 'wipscrapPcs',
    title: '含废PCS',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 120
  },
  {
    key: 'wippcsQty',
    dataIndex: 'wippcsQty',
    title: '有效PCS',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 120
  },
  {
    key: 'applyScrapQty',
    dataIndex: 'applyScrapQty',
    title: '报废申请',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 120
  },
  {
    key: 'applyReworkQty',
    dataIndex: 'applyReworkQty',
    title: '重工申请',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 120
  },
  {
    key: 'assitQty',
    dataIndex: 'assitQty',
    title: '外发数',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 120
  },
  {
    key: 'holdPcsQty',
    dataIndex: 'holdPcsQty',
    title: '暂停PCS数',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 120
  },
  {
    key: 'iqcPcsQty',
    dataIndex: 'iqcPcsQty',
    title: 'IQC数量',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 120
  },
  {
    key: 'delayDate',
    dataIndex: 'delayDate',
    title: '结存小时',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 120
  }
];
</script>

<template>
  <div class="h-full w-full">
    <div class="h-full w-full flex gap-8px">
      <div class="h-full min-h-560px w-500px flex-col-stretch gap-8px overflow-hidden lt-sm:overflow-auto">
        <CommonSearch
          ref="commonSearchRef"
          v-model:searchParams="searchParams"
          :form-list="formList"
          @search="search"
          @reset="reset"
        ></CommonSearch>
        <Table
          ref="leftTableRef"
          v-model:searchParams="searchParams"
          :column="leftColumn"
          :show-row-selection="false"
          :scroll="{ y: 'auto' }"
          is-init-get-data
          class="h-full"
          :show-quick-jumper="false"
          url="/erpsyncmes/Mi/findModuleNo"
          auto-generate-uuid
          @table-row-click="handleLeftTableRowClick"
          @table-data-load-sucess="handleLeftTableLoadSuccess"
        ></Table>
      </div>
      <div class="right-content h-full flex-col-stretch gap-8px overflow-hidden lt-sm:overflow-auto">
        <div class="mb-0.5% h-50% flex-col-stretch gap-8px overflow-hidden lt-sm:overflow-auto">
          <Table
            ref="rightTopTableRef"
            v-model:searchParams="rightTopSearchParams"
            :column="rightTopColumn"
            :show-row-selection="false"
            :scroll="{ y: 'auto' }"
            :is-init-get-data="false"
            url="/erpsyncmes/Ecn/findModuleNo"
            class="h-full"
            :show-quick-jumper="false"
          >
            <template #title>
              <AButton type="primary" class="mini-btn mr-8px" size="small" ghost @click="handleAdd(null)">
                <template #icon>
                  <PlusOutlined class="align-sub" />
                </template>
                新增
              </AButton>

              <!--
 <AButton
                type="primary"
                danger
                class="mini-btn mr-8px"
                size="small"
                ghost
                :disabled="!tabaleSelect.length"
                @click="handelDel()"
              >
                <template #icon>
                  <DeleteOutlined class="align-sub" />
                </template>
                删除
              </AButton>
-->
            </template>
          </Table>
        </div>
        <div class="h-49.5%">
          <Table
            ref="rightBottomTableRef"
            v-model:searchParams="rightBottomSearchParams"
            :column="rightBottomColumn"
            :show-row-selection="false"
            row-key="tableUuid"
            :scroll="{ y: 'auto' }"
            is-init-get-data
            :loading="loading"
            :data-source="leftBottomDataSource"
            url="/erpsyncmes/wip/selectWipPubtechnology"
            :auto-generate-uuid="false"
            class="h-full"
            :is-pagination="false"
            summary-fixed
          >
            <template #title>
              <span class="mr15px color-#646cff">WIP结存</span>
            </template>
            <template #summary>
              <STableSummaryRow>
                <STableSummaryCell :index="0" :col-span="2" class="text-center color-blue-600 font-bold">
                  本页合计:
                </STableSummaryCell>

                <STableSummaryCell :index="2" class="text-center color-blue-600 font-bold"></STableSummaryCell>
                <STableSummaryCell :index="3" class="text-center color-blue-600 font-bold">
                  <template #default="{ total }">{{ Number(total) || '' }}</template>
                </STableSummaryCell>
                <STableSummaryCell :index="4" class="text-center color-blue-600 font-bold">
                  <template #default="{ total }">{{ Number(total) || '' }}</template>
                </STableSummaryCell>
                <STableSummaryCell :index="5" class="text-center color-blue-600 font-bold">
                  <template #default="{ total }">{{ Number(total) || '' }}</template>
                </STableSummaryCell>
                <STableSummaryCell :index="6" class="text-center color-blue-600 font-bold">
                  <template #default="{ total }">{{ Number(total) || '' }}</template>
                </STableSummaryCell>
                <STableSummaryCell :index="7" class="text-center color-blue-600 font-bold">
                  <template #default="{ total }">{{ Number(total) || '' }}</template>
                </STableSummaryCell>
                <STableSummaryCell :index="8" class="text-center color-blue-600 font-bold">
                  <template #default="{ total }">{{ Number(total) || '' }}</template>
                </STableSummaryCell>
                <STableSummaryCell :index="9" class="text-center color-blue-600 font-bold">
                  <template #default="{ total }">{{ Number(total) || '' }}</template>
                </STableSummaryCell>
                <STableSummaryCell :index="10" class="text-center color-blue-600 font-bold">
                  <template #default="{ total }">{{ Number(total) || '' }}</template>
                </STableSummaryCell>
                <STableSummaryCell :index="11" class="text-center color-blue-600 font-bold">
                  <template #default="{ total }">{{ Number(total) || '' }}</template>
                </STableSummaryCell>
                <STableSummaryCell :index="12" class="text-center color-blue-600 font-bold">
                  <template #default="{ total }">{{ Number(total) || '' }}</template>
                </STableSummaryCell>
              </STableSummaryRow>
            </template>
          </Table>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.right-content {
  width: calc(100% - 508px);
  :deep(.ant-card) {
    &.top-card {
      .ant-card-head {
        min-height: 40px;
      }
    }
  }
  .content {
    :deep(.ant-descriptions) {
      .ant-descriptions-item-label,
      .ant-descriptions-item-content {
        padding: 3px;
      }
    }
  }
}
</style>
